<template>
  <div id="platVideo">
    <div id="bigVideo" v-if="movieShow" style="width: 100%" >
      <el-button id="close"  @click="movieShow=false;listShow=true">关闭</el-button>
      <video id="video" autoplay style="width: 100%"  width="90%" height="440" controls>

        <source :src="movie" type="video/mp4">
      </video>
    </div>
    <div v-else>
      <div v-if="videoList.length!=0" class="video-con" >
        <div style="height: 135px;"   @click="openPlayer(item.id)" v-for="item in videoList" :key="item.id">
          <video-1  :item="item" :img="imgMap[item.id]"></video-1>
        </div>
      </div>
      <div v-else style="background:white;height: 500px;display: flex;justify-content: center;align-items: center">
        <h2>空空如也</h2>
      </div>
    </div>



  </div>
</template>

<script>
import Video1 from "@/components/conmmon/Video-1";
import RecBox1 from "@/components/content/RecBox1";
import Player from "@/components/conmmon/Player";
import {getCompanyVideo, getVideo, openVideo} from "@/api/data";
import {baseUrl} from "@/api/baseUrl";
export default {
  name: "platVideo",
  components: {Player, RecBox1, Video1},
  data(){
    return{
      search:'',
      movieShow:false,
      movie:'',
      videoList:[],
      imgMap:[]
    }
  },
  created() {
    this.searchCompany('')
  },
  methods:{
    searchCompany(str){
      getCompanyVideo(str)
          .then(res=>{
            console.log(res)
            this.videoList=[]
            this.companyMap=res.data.extend.companyMap
            this.imgMap=res.data.extend.imgMap
            let map=res.data.extend.map
            this.map=map
            for (let key in map){             //遍历map拿到每个企业键的值
              for (let item of map[key]){       //遍历数组值拿到视频
                item.cid=key
                this.videoList.push(item)       //将取到的视频对象添加上cid并村存入视频列表
              }
            }
          })
    },
    openPlayer(id){
      openVideo(id)
          .then(res=>{
            this.movie=baseUrl+'/data/openData?str='+res.data.extend.address
            this.movieShow=true
            this.listShow=false
          })

    },
    // openPlayer(){
    //   this.movieShow=true
    //   this.$store.commit("SET_PLAYER")
    // }
  }
}
</script>

<style lang="stylus" scoped>
#platVideo
  width 100%
.video-con
  display grid
  gap .6rem .5rem
  grid-template-columns: repeat(5, 1fr);
  width 100%
#video{
  outline: none;
  height: 550px;
}
#bigVideo{
  background-color: #000;
  height: 100%;
}
#close{
  background-color: #000;
  outline: none;
  border: none;
  color: white;
  font-weight: 600;
}
</style>
